<template>
  <common-card class="homework-trends">
    <template #title>作业趋势</template>
    <!-- <template #operate
      ><span class="operate"
        ><label class="operate__icon"></label
        ><span class="operate__desc">导出</span></span
      ></template
    > -->
    <NoData v-if="dataList?.length === 0" style="height: fit-content"></NoData>
    <div
      v-show="dataList?.length && dataList?.length > 0"
      class="chart"
      ref="chartRef"
      style="width: 100%; height: 466px"
    ></div>
    <div class="table">
      <a-table
        :showSorterTooltip="false"
        :columns="STUDENT_HOMEWORK_TRENDS"
        :dataSource="dataList"
        :pagination="false"
        :scroll="{ y: 300 }"
      >
        <template v-slot:bodyCell="{ column, record }">
          <!-- <template v-if="column.dataIndex === 'homework_title'">
            <span class="detail-btn" @click="showDetail(record)">{{
              record.homework_title
            }}</span>
          </template> -->
          <template v-if="column.dataIndex === 'right_rate'">
            {{ getPercent(record.right_rate) }}%</template
          >
          <template v-if="column.dataIndex === 'release_time'">
            {{ dayjs(record.release_time * 1000).format('YYYY-MM-DD HH:mm') }}
          </template>
          <template v-if="column.dataIndex === 'submit_time'">
            {{ dayjs(record.submit_time * 1000).format('YYYY-MM-DD HH:mm') }}
          </template>
          <!-- <template v-if="column.dataIndex === 'operation'">
            <span class="detail-btn" @click="showDetail(record)">详情</span>
          </template> -->
        </template>
      </a-table>
    </div>
  </common-card>
</template>
<script setup>
import CommonCard from '../components/CommonCard.vue'
import { STUDENT_HOMEWORK_TRENDS } from '../constant'
import { ref, watchEffect } from 'vue'
import useCharts from '@/utils/echart/index'
// import { getLayerList as getList } from '@/apis/report'
import {
  getHomeworkTrends,
  getHomeworkInfo
} from '@/apis/situation-report/index'
import { useSituationReport } from '@/stores/situation-report'
import { getPercent } from '../utils'
// import { useReportStore } from '@/store/modules/report'
import dayjs from 'dayjs'
import 'dayjs/locale/zh-cn'
// import { router } from '@/router'
// import $bus from '@/utils/tools/bus'
import { useAuthStore } from '@/stores/auth-store.js'
dayjs.locale('en')
const userStore = useAuthStore()
// const reportStore = useReportStore()
const situationReport = useSituationReport()

const props = defineProps({
  studentId: {
    default: '',
    type: String
  }
})
const dataList = ref()

const showDetail = async record => {
  console.log('跳转到作业系统报告')
  // await getHomeworkDetail(record.homework_id)
  // setTimeout(() => {
  //   $bus.emit('changeMenu', {
  //     type: 'report',
  //     studentId: 'report-' + props.studentId
  //   })
  // }, 100)
  // router.push({
  //   path: '/report'
  // })
}

// const getHomeworkDetail = async id => {
//   const params = {
//     homework_id: id
//   }
//   const { data } = await getHomeworkInfo(params)
//   // reportStore.setHomeworkInfo(data)
//   // reportStore.setCurrentClassId(situationReport.search.class_id)
//   // await getLayerList()
// }

// 获取分层作业列表
// const getLayerList = async () => {
//   try {
//     const res = await getList({
//       teacher_id: userStore.userInfo.userId,
//       class_id: reportStore.currentClassId,
//       homework_id: reportStore.homeworkInfo.homework_id
//     })
//     if (res.code === 10000 && res.data.list) {
//       reportStore.setLayerCardId(res.data.list[0].card_id)
//     }
//   } catch (error) {
//     console.error(error)
//   }
// }

const getData = async () => {
  const params = {
    student_id: props.studentId,
    ...situationReport.search
  }
  const { data } = await getHomeworkTrends(params)
  dataList.value = data?.list || []
}

const getOption = () => {
  const option = {
    tooltip: {
      trigger: 'axis',
      padding: [12, 16],
      borderRadius: 8,
      axisPointer: {
        type: 'shadow',
        label: {
          fontSize: 14,
          shadowColor: 'rgba(139, 200, 254, 0.15)'
        }
      },
      formatter: params => {
        let res = `<span style="font-weight: 700;">${params[0].axisValueLabel}</span><br>`
        params.forEach(item => {
          res += `<span style="display: flex; align-items: center; padding-top: 16px; justify-content: space-between;">
            <span style="width: fit-content; display: inline-flex; align-items: center; gap: 4px">
              <span style="display: inline-block; width: 12px; height: 12px; border-radius: 200px; background: ${item.color};"></span>
            <span style="color: rgba(4, 11, 26, 0.75);">${item.seriesName}</span>
          </span>
          <span style="color: rgba(4, 11, 26, 0.5); width: 50px;">${item.data}%</span>
         </span>`
        })
        return res
      }
    },
    legend: {
      itemGap: 22,
      right: 0
    },
    grid: {
      left: '3%',
      right: '0',
      bottom: '8%',
      top: '10%'
    },
    color: ['#8BC8FF'],
    xAxis: {
      type: 'category',
      data: dataList.value?.map(item => item.homework_title) || [],
      axisLabel: {
        formatter: function (value) {
          let res = value
          if (res.length && res.length > 9) {
            res = res.substring(0, 8) + '..'
          }
          return res
        }
      }
    },
    yAxis: [
      {
        type: 'value',
        splitNumber: 5,
        nameTextStyle: {
          align: 'right'
        }
      }
    ],
    series: [
      {
        data: dataList.value?.map(item => getPercent(item.right_rate)),
        name: '个人正确率',
        itemStyle: {
          color: '#FFD879'
        },
        symbol: 'circle',
        symbolSize: 14,
        type: 'line'
      },
      {
        data: dataList.value?.map(item => getPercent(item.class_right_rate)),
        name: '班级正确率',
        type: 'line',
        symbol: 'circle',
        symbolSize: 14
      }
    ]
  }
  return option
}
const chartRef = ref(null)
const { setOption } = useCharts(chartRef, true, true, 'light')

watchEffect(async () => {
  if (situationReport.search && props.studentId) {
    await getData()
    setOption(getOption())
  }
})
</script>
<style lang="less" scoped>
@import '../style.less';

.homework-trends {
  .operate {
    &__icon {
      background: url('@/assets/images/situation-report/export.png') no-repeat
        center/cover;
      margin-right: 8px;
    }
  }

  .table {
    margin-top: @gap;

    .detail-btn {
      color: #4d88ff;
      cursor: pointer;
    }
  }
}
</style>
